<template>
    <div class="box">
       <h2>当前的和是：{{sum}},放大10倍后是：{{bigSum}}</h2>  
       <h2>学校：{{ schoole }}，位置：{{ address }}</h2>  
       <select v-model.number="select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
       </select> 
       <button @click="add">+</button>
       <button @click="minus">-</button>
    </div>
</template>

<script setup lang="ts" name="Count">
import {ref} from 'vue'
import {useCountStore} from '@/store/count'
import {storeToRefs} from 'pinia'

const countStore = useCountStore()
const {sum,schoole,address,bigSum} = storeToRefs(countStore)

const select =ref(1)

function add(){
    //2
    // countStore.$patch({
    //     sum:5
    // })
    //3
    countStore.increments(select.value)
}

function minus(){
    //1
    countStore.sum-=select.value
}

</script>

<style scoped>
.box{
    background-color: skyblue;
    border-radius: 10px;
    padding:  20px;
    box-shadow: 0 0 10px;
}
select,button{
    margin: 0 5px;
    height: 25px;
}
</style>